<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  watch: {
    listData: {
      deep: true,
      handler(newVal) {
        newVal.forEach(node => this.updateParentNodeStatus(node));
      }
    }
  },
  methods: {
    updateNodeStatus(node) {
      console.log(node);
      if (node.children) {
        const childStatus = node.children.map(child => this.updateNodeStatus(child));
        const allChildrenDone = childStatus.every(status => status);
        node.isDone = allChildrenDone;
        return allChildrenDone;
      } else {
        return node.isDone;
      }
    },
    updateParentNodeStatus(node) {
      if (node.children) {
        const childStatus = node.children.map(child => this.updateNodeStatus(child));
        node.isDone = childStatus.every(status => status);
      }
    },
    handleNodeClick(node) {
      console.log(node.isDone);
      this.$set(node, 'isDone', !node.isDone); // 使用 $set 方法来触发 Vue 的响应式更新
      this.updateNodeStatus(node);
      console.log(node.isDone);

    },
  }

}

</script>

<template>
  <div>
    <el-tree
      :data="listData"
      :props="defaultProps"
      accordion
      highlight-current
      >
      <template slot-scope="{ node, data }">
                  <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span>
                      <img v-if="data.isDone" class="done" src="@/assets/img/icon_yiwanc.png">
                      <img v-else class="notDone" src="@/assets/img/icon_weiwanc.png">
                    </span>
                  </span>
      </template>
    </el-tree>
  </div>
</template>


<style scoped lang="scss">
::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #F5F7FA;
}

::v-deep .el-tree-node__content:hover {
  background-color: #F0F6FF !important;
  color: #1f86f6;
}

::v-deep .el-tree-node__content {
  height: 2rem;
}

::v-deep .el-tree-node__label {
  font-size: 14px !important;
}

::v-deep .el-icon-turn-off {
  position: absolute;
  right: 2rem;
}

.done {
  position: absolute;
  right: 2rem;
  width: 1rem;
  height: 1rem;
}

.notDone {
  position: absolute;
  right: 2rem;
  width: 1rem;
  height: 1rem;
}

</style>
